<template>
  <div class="setdiymerket">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="grid-content">活动个数</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content text_lft">
          <template>
            <el-input-number
              size="small"
              v-model="num"
              step-strictly
              controls-position="right"
              @change="change();"
              :step="2"
              :min="2"
              :max="10"
            ></el-input-number>
          </template>
        </div>
      </el-col>
    </el-row>

    <template v-if="!changeSeckill">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">活动名称</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content text_lft">
            <template>
              <el-input v-model="name" placeholder="名称" size="small"></el-input>
              <el-color-picker v-model="nameColor" size="small"></el-color-picker>
            </template>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">活动简介</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content text_lft">
            <template>
              <el-input v-model="title" placeholder="名称" size="small"></el-input>
              <el-color-picker v-model="titleColor" size="small"></el-color-picker>
            </template>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">提示(左)</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content text_lft">
            <template>
              <el-input v-model="leftHint" placeholder="名称" size="small"></el-input>
              <el-color-picker v-model="leftHintColor" size="small"></el-color-picker>
            </template>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">提示(右)</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content text_lft">
            <template>
              <el-input v-model="rgtHint" placeholder="名称" size="small"></el-input>
              <el-color-picker v-model="rgtHintColor" size="small"></el-color-picker>
            </template>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">图片一</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content text_lft mgn_top">
            <template>
              <img :src="oneImage" alt class="upimg" v-if="oneImage" />
              <img
                :style="{'opacity':oneImage?0:1}"
                class="upimg imgLft"
                src="@/assets/config_images/addimg.png"
                alt
                @click="changeOneImg"
              />
            </template>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content">图片二</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content text_lft mgn_top">
            <template>
              <img :src="twoImage" alt class="upimg" v-if="twoImage" />
              <img
                :style="{'opacity':twoImage?0:1}"
                class="upimg imgLft"
                src="@/assets/config_images/addimg.png"
                alt
                @click="changeTwoImg"
              />
            </template>
          </div>
        </el-col>
      </el-row>
    </template>

    <el-row :gutter="10">
      <el-col :span="6">
        <div class="grid-content">开启秒杀</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content text_lft mgn_top">
          <template>
            <el-radio-group v-model="changeSeckill" size="small">
              <el-radio-button :label="true">是</el-radio-button>
              <el-radio-button :label="false">否</el-radio-button>
            </el-radio-group>
          </template>
        </div>
      </el-col>
    </el-row>
    <UploadImages @closeModel="closeModel" :dialogVisible="showImg" @changeImg="changeImg"></UploadImages>
  </div>
</template>

<script>
import UploadImages from "@/components/UploadImages/UploadImages";
import { mapGetters } from "vuex";
export default {
  components: {
    UploadImages
  },
  computed: {
    ...mapGetters(["merketObj"]),
    name: {
      get() {
        return this.merketObj.selectMoudule.name;
      },
      set(val) {
        this.merketObj.selectMoudule.name = val;
        this.update();
      }
    },
    changeSeckill: {
      get() {
        return this.merketObj.selectMoudule.changeSeckill;
      },
      set(val) {
        this.merketObj.selectMoudule.changeSeckill = val;
        this.update();
      }
    },
    nameColor: {
      get() {
        return this.merketObj.selectMoudule.nameColor;
      },
      set(val) {
        this.merketObj.selectMoudule.nameColor = val;
        this.update();
      }
    },
    title: {
      get() {
        return this.merketObj.selectMoudule.title;
      },
      set(val) {
        this.merketObj.selectMoudule.title = val;
        this.update();
      }
    },
    titleColor: {
      get() {
        return this.merketObj.selectMoudule.titleColor;
      },
      set(val) {
        this.merketObj.selectMoudule.titleColor = val;
        this.update();
      }
    },
    leftHint: {
      get() {
        return this.merketObj.selectMoudule.leftHint;
      },
      set(val) {
        this.merketObj.selectMoudule.leftHint = val;
        this.update();
      }
    },
    leftHintColor: {
      get() {
        return this.merketObj.selectMoudule.leftHintColor;
      },
      set(val) {
        this.merketObj.selectMoudule.leftHintColor = val;
        this.update();
      }
    },
    rgtHint: {
      get() {
        return this.merketObj.selectMoudule.rgtHint;
      },
      set(val) {
        this.merketObj.selectMoudule.rgtHint = val;
        this.update();
      }
    },
    rgtHintColor: {
      get() {
        return this.merketObj.selectMoudule.rgtHintColor;
      },
      set(val) {
        this.merketObj.selectMoudule.rgtHintColor = val;
        this.update();
      }
    },
    oneImage: {
      get() {
        return this.merketObj.selectMoudule.oneImage;
      },
      set(val) {
        this.merketObj.selectMoudule.oneImage = val;
        this.update();
      }
    },
    twoImage: {
      get() {
        return this.merketObj.selectMoudule.twoImage;
      },
      set(val) {
        this.merketObj.selectMoudule.twoImage = val;
        this.update();
      }
    },
    num: {
      get() {
        return this.merketObj.data.length;
      },
      set(val) {
        this.dataState = true;
        if (val > this.merketObj.data.length) {
          this.merketObj.data = [...this.merketObj.data, ...this.addData];
        } else if (val < this.merketObj.data.length) {
          console.log(this.merketObj.data.splice(val, 2));
          this.merketObj.data.splice(val, 2);
        }
        this.update();
      }
    }
  },
  data() {
    return {
      input: "",
      color: "#409EFF",
      showImg: false,
      nowImgIndex: 0,
      addData: [
        {
          name: "大牌惠购",
          changeSeckill: false, // 是否切换成秒杀样式
          nameColor: "#333333",
          title: "汇大牌，享好价",
          titleColor: "#08a7d1",
          leftHint: "汇大牌",
          leftHintColor: "#08a7d1",
          rgtHint: "享好价",
          rgtHintColor: "#08a7d1",
          oneImage: require("../../../assets/config_images/cp.png"),
          twoImage: require("../../../assets/config_images/cp.png")
        },
        {
          name: "大牌惠购",
          changeSeckill: false, // 是否切换成秒杀样式
          nameColor: "#333333",
          title: "汇大牌，享好价",
          titleColor: "#08a7d1",
          leftHint: "汇大牌",
          leftHintColor: "#08a7d1",
          rgtHint: "享好价",
          rgtHintColor: "#08a7d1",
          oneImage: require("../../../assets/config_images/cp.png"),
          twoImage: require("../../../assets/config_images/cp.png")
        }
      ],
      dataState: false // 数组状态
    };
  },
  watch: {
    // merketObj: {
    //   handler(val) {
    //     console.log(val)
    //     if (!this.dataState) {
    //       this.merketObj.data[this.merketObj.selectIndex] = this.merketObj.selectMoudule
    //     } else {
    //       this.dataState = false;
    //     }
    //     this.$store.commit("merket/Set_obj", this.merketObj);
    //     this.update();
    //   },
    //   deep: true
    // }
  },
  methods: {
    changeImg(val) {
      if (this.nowImgIndex === 1) {
        this.oneImage = val;
      } else {
        this.twoImage = val;
      }
      // this.noShow = true;
      // var cont = "url(" + val + ")"
      // this.backStyle.backgroundImage = val;
      // this.activeChange(cont);
      // this.$store.state.advert.advertObj.imgUrl = val;
    },
    // 关闭选择图片
    closeModel() {
      this.showImg = false;
    },
    change() {
      console.log(1212);
    },
    update() {
      if (!this.dataState) {
        this.merketObj.data[
          this.merketObj.selectIndex
        ] = this.merketObj.selectMoudule;
      } else {
        this.dataState = false;
      }
      this.$store.commit("merket/Set_obj", this.merketObj);
      // 更新vuex里面的PageJSON
      this.$store.dispatch("apply/PageJSONUpData");
      // 更新父组件中的PageJSON
      this.$emit("updataNowPageJSON");
    },
    // 修改第一张图片
    changeOneImg() {
      this.showImg = true;
      this.nowImgIndex = 1;
    },
    // 修改第二张图片
    changeTwoImg() {
      this.showImg = true;
      this.nowImgIndex = 2;
    }
  }
};
</script>

<style lang="scss" scoped>
.setdiymerket {
  .grid-content {
    min-height: 50px;
    position: relative;
  }

  .text_lft {
    text-align: left;
    display: flex;
    align-items: center;
  }

  .mgn_top {
    // margin-top: 10px;
  }
  .upimg {
    width: 50px;
    height: 50px;
  }
  .imgLft {
    position: absolute;
    left: 0;
  }
}
</style>
